@charset "UTF-8";
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body,
button, input, select, textarea { font: 400 .12rem/1.5 'Microsoft JhengHei', 'Lantinghei SC', 'Microsoft Yahei', 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; }
input, textarea { line-height: normal; font-family: 'Microsoft JhengHei', 'Microsoft Yahei', tahoma, Arail, 'Hiragino Sans GB', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif; }
body,
dl, dt, dd,ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend, input, textarea,
p, blockquote, th, td, hr, button,
article, aside, details, figcaption, figure, footer, header, menu, nav, section { margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
ul, ol { list-style: none; }
li { *vertical-align: top; }
a { color: #333; background-color: transparent; text-decoration: none;  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
a:active, a:hover { outline: 0;  }
a:active,
a:hover { text-decoration: none; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
mark { background: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em .4rem; }
hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { -webkit-box-sizing: content-box; box-sizing: content-box; color: inherit;  font-size: inherit; background: none; outline: none; border: none; border-radius: 0; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"],
input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input::-ms-clear { display: none; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
html,
body { min-height: 100vh; color: #333; font-size: 100px; background-color: #f4f4f4; }
body { display: flex; flex-direction: column; font-size: .16rem; transition: transform .2s; }
body.hide { overflow-x: visible; transform: translateX(calc(100vw - 1.5rem)); }
.fl { float: left; _display: inline; }
.fr { float: right; }
.dn { display: none; }
.flex { display: flex; }
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.mt20 { margin-top: .2rem; }
.ml5 { margin-left: .05rem; }
.ml10 { margin-left: .1rem; }
.ml15 { margin-left: .15rem; }
.ml20 { margin-left: .2rem; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con { box-sizing: border-box; width: 12rem; max-width: 100%; margin-left: auto; margin-right: auto; }
.con-bg { padding: .3rem; margin-top: .2rem; margin-bottom: .95rem; border-radius: .1rem; background-color: #fff; }
.con-hd {}
.con-title { display: flex; justify-content: center; align-items: flex-end; padding-top: .2rem; margin-bottom: .3rem; font-size: .26rem; font-weight: 400; }
.con-title::before,
.con-title::after {
    content: '';
    display: block;
    flex: 1;
    height: 0;
    margin-bottom: .05rem;
    border-bottom: 2px solid #f4f4f4;
    }
.con-title::before { margin-right: .15rem; }
.con-title::after { margin-left: .15rem; }
.con-tab { display: flex; justify-content: center; }
.con-tab > li { margin-left: .4rem; margin-right: .4rem; }
.con-tab > li > a { position: relative; display: block; color: #999; font-size: .2rem; line-height: 1.5; transition: color .2s; }
.con-tab > li > a > i {
    position: absolute;
    bottom: 100%;
    left: 100%;
    box-sizing: border-box;
    min-width: .2rem;
    height: .2rem;
    padding-left: .06rem;
    padding-right: .06rem;
    margin-left: -0.02rem;
    margin-bottom: -.12rem;
    border-radius: .1rem;
    color: #fff;
    font-size: .14rem;
    font-style: normal;
    text-align: center;
    line-height: .2rem;
    background-color: #e3184d;
    }
.con-tab > li > a::after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    margin-top: .04rem;
    border-bottom: .03rem solid currentColor;
    transform: scaleX(0);
    opacity: 0;
    transition: transform .2s, opacity .2s;
    }
.con-tab > li.active > a,
.con-tab > li > a:hover,
.con-tab > li > a:active { color: #282460; }
.con-tab > li.active > a::after,
.con-tab > li > a:hover::after,
.con-tab > li > a:active::after { opacity: 1; transform: scaleX(1); }
.con-ft {}

.ui-button {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    height: .44rem;
    padding-left: .2rem;
    padding-right: .2rem;
    border: 2px solid #282460;
    border-radius: .04rem;
    color: #fff;
    font-size: .16rem;
    font-weight: 500;
    background-color: #282460;
    outline: none;
    user-select: none;
    transition: background-color .2s, color .2s, border-color .2s;
    }
.ui-button::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    z-index: -1;
    border-radius: inherit;
    background-color: rgba(0, 0, 0, .2);
    box-shadow: 0 2px .04rem rgba(0, 0, 0, .5) inset;
    opacity: 0;
    transition: opacity .2s;
    }
.ui-button:hover::after,
.ui-button:active::after,
.ui-button:focus::after { opacity: 1; }
.ui-button.white { background-color: #fff; color: #282460; }
.ui-button.white:hover,
.ui-button.white:active { color: #fff; background-color: #282460; }
.ui-button.disabled,
.ui-button.disabled:hover,
.ui-button.disabled:active,
.ui-button[disabled],
.ui-button[disabled]:hover,
.ui-button[disabled]:active,
.ui-button:disabled:hover,
.ui-button:disabled:active,
.ui-button:disabled { color: #aaa; border-color: #dedede; background-color: #dedede; cursor: not-allowed; }
.ui-button.disabled::after,
.ui-button[disabled]::after,
.ui-button:disabled::after { display: none; }

.header { position: relative; height: .88rem; background-color: #282460; }
.logo { position: absolute; top: 0; bottom: 0; left: .42rem; z-index: 2; width: 2.28rem; height: .42rem; margin-top: auto; margin-bottom: auto; background: url(../images/logo-sprite.png) 0 0 no-repeat; background-image: image-set(url('../images/logo-sprite.png') 1x, url('../images/logo-sprite@2x.png') 2x); background-size: auto 100%; }
.logo::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    width: .6rem;
    height: .16rem;
    background: url(../images/logo-sprite.png) -2.33rem 0 no-repeat;
    background-image: image-set(url('../images/logo-sprite.png') 1x, url('../images/logo-sprite@2x.png') 2x);
    background-size: auto .42rem;
    transform-origin: center bottom;
    animation: logo 6s infinite 1s;
    }
.logo > a { display: block; width: 100%; height: 100%; text-indent: -999em;  -webkit-touch-callout: none; }
@keyframes logo {
    0% { transform: scale3d(1,1,1); }
    3% { transform: scale3d(1.2,1.2,1.2); }
    5% { transform: scale3d(1.2,1.2,1.2) translateY(-0.08rem); }
    7% { transform: scale3d(1.2,1.2,1.2) translateY(0); }
    10% { transform: scale3d(1.2,1.2,1.2) translateX(-.1rem) skewX(-20deg) rotate(-5deg); }
    12% { transform: scale3d(1.2,1.2,1.2) translateX(.1rem) skewX(20deg) rotate(5deg); }
    18%, 100% { transform: scale3d(1,1,1) translateX(0) skewX(0) rotate(0); }
}

.nav {  display: flex; justify-content: center; height: 100%; margin: auto; text-align: center; }
.nav > li { width: 1.25rem; }
.nav > li > a { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #9894c4; font-size: .2rem; transition: color .2s; overflow: hidden; }
.nav > li > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    width: .42rem;
    height: .04rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 2px;
    background-color: #ffdd15;
    opacity: 0;
    transform: scale(0);
    transition: opacity .2s, transform .2s;
    }
.nav > li > a:hover,
.nav > li > a:active { color: #fff; }
.nav > li.current > a { color: #fff; background-color: #211e4c; }
.nav > li > a:hover::after,
.nav > li > a:active::after,
.nav > li.current > a::after { opacity: 1; transform: scale(1); }

.user { position: absolute; top: 0; bottom: 0; right: 0; }
.user-unlogin { display: flex; height: 100%; text-align: center; }
.user-unlogin > a { display: flex; justify-content: center; align-items: center; width: 1.3rem; height: 100%; border-left: 1px solid #312d74; color: #9894c4; font-size: .2rem; line-height: .88rem; transition: color .2s; overflow: hidden; }
.user-unlogin > a::before {
    content: '';
    display: block;
    width: .26rem;
    height: .26rem;
    box-sizing: border-box;
    border: 2px solid #ffdd15;
    border-radius: 50%;
    margin-right: .08rem;
    background: center no-repeat;
    transition: transform .25s linear;
    background-size: auto .14rem;
    }
.user-unlogin > a:nth-of-type(1)::before { background-image: url(''); }
.user-unlogin > a:nth-of-type(2)::before { background-image: url(''); }
.user-unlogin > a:hover,
.user-unlogin > a:active { color: #fff; }
.user-unlogin > a:hover::before,
.user-unlogin > a:active::before { transform: translateX(-3px); }

.user-logined { position: relative; height: 100%; margin-right: .3rem; }
.user-logined > a { display: flex; justify-content: center; align-items: center; padding-left: .15rem; padding-right: .15rem; color: #9894c4; font-size: .16rem; line-height: .88rem; transition: color .2s, background-color .2s; }
.user-logined > a:after {
    content: '';
    display: block;
    width: .26rem;
    height: .26rem;
    box-sizing: border-box;
    border: 2px solid #ffdd15;
    border-radius: 50%;
    margin-left: .1rem;
    background: url('') center no-repeat;
    transition: transform .25s linear;
    background-size: auto .14rem;
    }
.user-logined.active > .user-menu { display: block; animation: fadeInDown .2s; }
.user-logined.active > a,
.user-logined > a:hover,
.user-logined > a:active { color: #d1d1d1; background-color: #211e4c; }
.user-menu { position: absolute; top: 100%; right: 0; z-index: 999; display: none; width: 2rem; border-bottom-left-radius: .08rem; border-bottom-right-radius: .08rem; overflow: hidden; background-color: #211e4c; box-shadow: 0 .05rem .1rem rgba(0, 0, 0, .1); }
.user-menu > li { position: relative; height: .46rem; padding-left: .28rem; padding-right: .28rem;  color: #d1d1d1; font-size: .16rem; line-height: .46rem; }
.user-menu > li:first-of-type { border-bottom: 1px solid #2a2a2a; }
.user-menu > li:last-of-type { height: .64rem; border-top: 1px solid #2a2a2a; line-height: .64rem; }
.user-menu > li > a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-left: .28rem; padding-right: .28rem; color: inherit; transition: color .2s, background-color .2s; }
.user-menu > li > a:hover,
.user-menu > li > a:active { color: #fff; background-color: #1f1f2a; }

/* 手機端頂部 */
.mobile-nav-control { position: absolute; top: 0; left: 0; width: .36rem; height: .98rem; padding-left: .2rem; padding-right: .2rem; text-indent: -999em; color: #fff; opacity: .675; transition: opacity .2s; display: none; }
.mobile-nav-control:hover,
.mobile-nav-control:active { opacity: 1; }
.mobile-nav-control::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    width: .36rem;
    height: .3rem;
    margin: auto;
    background: url('') center no-repeat;
    background-size: 100% auto;
    transition: border-color .2s;
    }
.mobile-nav-control::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: .2rem;
    box-sizing: border-box;
    width: .32rem;
    height: 0;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: .02rem;
    border-bottom: .04rem solid currentColor;
    }
.mobile-nav-control.close { color: #c0bcf2; }
.mobile-nav-control.close::before {
    height: 0;
    width: .4rem;
    border-bottom: .04rem solid currentColor;
    border-radius: .02rem;
    transform: rotate(45deg);
    }
.mobile-nav-control.close::after {
    left: 0;
    right: 0;
    width: .4rem;
    margin: auto;
    transform: rotate(-45deg);
    }
.mobile-nav-control.close:hover,
.mobile-nav-control.close:active { color: #fff; }
.mobile-user-control { position: absolute; top: 0; right: 0; bottom: 0; display: none; width: .42rem; padding-left: .2rem; padding-right: .2rem; text-indent: -999em; color: #fff; opacity: .675; transition: opacity .2s; }
.mobile-user-control:hover,
.mobile-user-control:active { opacity: 1; }
.mobile-user-control::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: .42rem;
    height: .42rem;
    margin: auto;
    border: .04rem solid currentColor;
    border-radius: 50%;
    background: url('') center no-repeat;
    background-size: auto .24rem;
    }

.mobile-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1999;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    padding-top: .98rem;
    padding-right: 1.5rem;
    padding-bottom: .2rem;
    padding-bottom: max(.2rem, env(safe-area-inset-bottom));
    background-color: rgba(0, 0, 0, 0);
    color: #c0bcf2;
    opacity: 0;
    transform: translateX(-100vw);
    transition: opacity .2s, transform .2s, background-color .2s linear;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    }
.mobile-fixed.show { opacity: 1; transform: translateX(calc(-100vw + 1.5rem)); background-color: rgba(0, 0, 0, .6); }
.mobile-fixed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 1.5rem;
    bottom: 0;
    z-index: -1;
    background-color: #282460;
    }
.mobile-fixed-shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; }
.mobile-logo { top: .23rem; bottom: unset; margin: 0 auto; transform: translateX(-.75rem); text-indent: -999em; }
.mobile-nav { position: relative; overflow-y: scroll; -webkit-overflow-scrolling: touch; font-size: .28rem; }
.mobile-nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px solid #373274;
    transform: scaleY(.5);
    }
.mobile-nav-item { position: relative; min-height: 1rem; }
.mobile-nav-item.active { background-color: #211e4c; }
.mobile-nav-item.active > .mobile-nav-sub { display: block; }
.mobile-nav-item.active > strong::after,
.mobile-nav-item.active > .mobile-user-meta::after { transform: rotate(-135deg) translateY(-.04rem); }
.mobile-nav-item::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 1px solid #373274;
    transform: scaleY(.5);
    }
.mobile-nav-item > strong,
.mobile-nav-item > a { position: relative; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; height: 1rem; padding-left: .3rem; padding-right: .3rem; color: inherit; font-weight: 600; -webkit-touch-callout: none; transition: background-color .2s, color .2s; }
.mobile-nav-item > a:hover,
.mobile-nav-item > a:active { background-color: #211e4c; color: #fff; }
.mobile-nav-item > strong::after {
    content: '';
    position: absolute;
    top: 0;
    right: .3rem;
    bottom: 0;
    box-sizing: border-box;
    width: .20rem;
    height: .20rem;
    margin-top: auto;
    margin-bottom: auto;
    border-right: .04rem solid currentColor;
    border-bottom: .04rem solid currentColor;
    transform: rotate(45deg) translateY(-.04rem);
    transition: transform .2s;
    }
.mobile-nav-item.mobile-user.unlogin { display: flex; align-items: center; padding-left: .3rem; }
.mobile-nav-item.mobile-user.unlogin::before {
    content: '';
    display: block;
    box-sizing: border-box;
    width: .42rem;
    height: .42rem;
    border: .04rem solid currentColor;
    border-radius: 50%;
    background: url('') center no-repeat;
    background-size: auto .24rem;
    }
.mobile-nav-item.mobile-user.unlogin > a { position: relative; width: auto; }
.mobile-nav-item.mobile-user.unlogin > a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: .26rem;
    border-left: 1px solid #373274;
    margin-top: auto;
    margin-bottom: auto;
    }
.mobile-nav-item.mobile-user.unlogin > a:first-of-type { padding-left: .2rem; }
.mobile-nav-item.mobile-user.unlogin > a:first-of-type::after { display: none; }

.mobile-user-meta { position: relative; display: flex; flex-direction: column; justify-content: center; height: 1rem; padding-left: .92rem; padding-right: .3rem; line-height: 1.4; }
.mobile-user-meta::before {
    content: '';
    position: absolute;
    top: .29rem;
    left: .3rem;
    display: block;
    box-sizing: border-box;
    width: .42rem;
    height: .42rem;
    border: .04rem solid currentColor;
    border-radius: 50%;
    background: url('') center no-repeat;
    background-size: auto .24rem;
    }
.mobile-user-meta::after {
    content: '';
    position: absolute;
    top: 0;
    right: .3rem;
    bottom: 0;
    box-sizing: border-box;
    width: .20rem;
    height: .20rem;
    margin-top: auto;
    margin-bottom: auto;
    border-right: .04rem solid currentColor;
    border-bottom: .04rem solid currentColor;
    transform: rotate(45deg) translateY(-.04rem);
    transition: transform .2s;
    }
.mobile-user-meta > h2 { font-size: .28rem; font-weight: 400; }
.mobile-user-meta > h3 { font-size: .22rem; font-weight: 400; }

.mobile-nav-sub { position: relative; flex-shrink: 0; width: 100%; display: none; padding-bottom: .15rem; background-color: #211e4c; color: inherit; }
.mobile-nav-sub > li > a { display: flex; align-items: center; height: .68rem; width: 100%; box-sizing: border-box; padding-left: .6rem; color: inherit; font-size: .26rem; -webkit-touch-callout: none; transition: background-color .2s, color .2s; }
.mobile-nav-sub > li > a:hover,
.mobile-nav-sub > li > a:active { background-color: #171535; color: #fff; }

.mobile-fixed > .copyright-content { margin-top: .4rem; font-size: .2rem; color: inherit; }

.page-header { height: 1.2rem; background-color: #211e4c; user-select: none; }
.page-header-con { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; color: #8782c6; font-size: .18rem; line-height: 2.2; overflow: hidden; }
.page-title { color: #fff; font-weight: 500; font-size: .28rem; line-height: 1.42; }
.page-nav { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.page-nav > li { position: relative; z-index: 1; margin-right: -1px; }
.page-nav > li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: .16rem;
    margin-top: auto;
    margin-bottom: auto;
    border-right: 1px solid #3e3a72;
    }
.page-nav > li:last-of-type::after { display: none; }
.page-nav > li > a { display: flex; justify-content: center; align-items: center; min-width: .8rem; height: 100%; padding-left: .2rem; padding-right: .2rem; color: #9894c4; font-size: .16rem; font-weight: 500; transition: backgroud-color .2s, color .2s; }
.page-nav > li > a:hover,
.page-nav > li > a:active { color: #fff; }
.page-nav > li.current > a { color: #fff; background-color: #171535; }
/* .main { background-color: #ebebeb; } */

footer { margin-top: auto; }
.footer { background-color: #282460; }
.footer-con { display: flex; align-items: center; justify-content: space-between; width: 14.2rem; max-width: 100%; height: 1.25rem; margin-left: auto; margin-right: auto; overflow: hidden; }
.footer-logo { width: 2.4rem; height: .44rem; margin-top: auto; margin-bottom: auto; background: url(../images/logo.png) center no-repeat; background-image: image-set(url('../images/logo.png') 1x, url('../images/logo@2x.png') 2x); background-size: auto 100%; text-indent: -999em; }
.footer-nav { display: flex; height: .3rem; margin-right: -.35rem; color: #a19dde; font-size: .18rem; line-height: .3rem; text-align: right; overflow: hidden; }
.footer-nav > li { position: relative; padding-left: .3rem; padding-right: .35rem; }
.footer-nav > li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: .24rem;
    margin-top: auto;
    margin-bottom: auto;
    border-right: 1px solid #4a4580;
    transform: rotate(45deg);
    }
.footer-nav > li > a { color: inherit; transition: color .2s; }
.footer-nav > li > a:hover,
.footer-nav > li > a:active { color: #fff; text-decoration: underline; }

.copyright { border-top: 1px solid #363368; background-color: #282460; }
.copyright-con { display: flex; justify-content: space-between; align-items: center; width: 14.2rem; max-width: 100%; height: .32rem; padding-top: .18rem; padding-bottom: .18rem;  margin-left: auto; margin-right: auto; font-size: .14rem; line-height: .32rem; color: #8782c6; }
.copyright-content { display: flex; }
.copyright-content > .zh { padding-left: .38rem; background: url(../images/copyright-logo.png) left center no-repeat; background-size: auto .22rem; }
.copyright-content > .en { margin-left: .05rem; }

.contact { display: flex; height: .32rem; text-align: right; }
.contact > li { width: .32rem; height: .32rem; margin-left: .2rem; overflow: hidden; }
.contact > li > a { position: relative; display: block; width: 100%; height: 100%; border-radius: 100%; text-indent: 999em; background: rgba(255, 255, 255, .2) center no-repeat; background-size: auto .16rem; transition: box-shadow .35s linear; overflow: hidden; -webkit-touch-callout: none; }
.contact > li > a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    background: inherit;
    opacity: 0;
    transform: scale3d(2,2,2);
    transition: transform .25s linear, opacity .2s;
    }
.contact > li > a:hover,
.contact > li > a:active { box-shadow: 0 0 .1rem rgba(0, 0, 0, .25); }
.contact > li > a:hover::after,
.contact > li > a:active::after { opacity: 1; transform: scale3d(1,1,1); }
.contact > li > .facebook { background-image: url(''); }
.contact > li > .facebook::after { background-color: #4b61f4;  }
.contact > li > .line { background-image: url(''); }
.contact > li > .line::after { background-color: #01b901; }

/* 浮動菜單 */
.fixed-menu { position: fixed; top: 50%; right: .1rem; z-index: 999; animation: fixedMenu .3s .5s; animation-fill-mode: both; }
.fixed-menu > button { display: block; width: .68rem; height: .68rem; padding: .09rem .2rem .31rem; border: none; background: url(../images/sprite.png) center no-repeat; background-position: 0 -.42rem; background-size: 1.58rem auto; color: #fff; font-size: .22rem;; line-height: .68rem; text-align: center; user-select: none; outline: none; }
.fixed-menu > button:hover,
.fixed-menu > button:active { transform: scale3d(.975,.975,.975); }
.fixed-menu.active { right: 2rem; }
.fixed-menu.active > button { animation: fixedMenu .3s; animation-fill-mode: both; }
.fixed-menu.active > .fixed-nav { display: block; }
@keyframes fixedMenu {
    0% { transform: scale3d(0,0,0); opacity: 0; }
    25% { transform: scale3d(1.25,1.25,1.25); opacity: 1; }
    50% { transform: scale3d(1,1,1); opacity: 1; }
    75% { transform: scale3d(.95,.95,.95); opacity: 1; }
    100% { transform: scale3d(1,1,1); opacity: 1; }
}
.fixed-nav { position: absolute; top: .6rem; left: .9rem; display: none; width: 1.64rem; padding: .02rem .12rem .12rem; border-radius: .2rem; background-color: #fff; box-shadow: 0 .1rem .3rem rgba(18, 22, 152, .2); animation: fadeInDown .2s .3s; animation-fill-mode: both; }

.fixed-nav-item { position: relative; display: block; height: .52rem; padding: .14rem .15rem .12rem .7rem; margin-top: .1rem; border-radius: .1rem; background-color: #f6ad2d; color: #fff; font-size: .18rem; line-height: 1.4; transition: transform .2s linear; }
.fixed-nav-item:hover,
.fixed-nav-item:active { transform: translateY(-2px); }
.fixed-nav-item > .icon { position: absolute; top: 0; bottom: 0; left: .15rem; width: .44rem; background: url(../images/sprite.png) no-repeat; background-size: 1.58rem auto; }
.fixed-nav-item > strong,
.fixed-nav-item > b { display: block; font-weight: 500; }
.fixed-nav-item.facebook { background-color: #3b5999; background-image: linear-gradient(45deg, #3b5999, #5d8dd4); }
.fixed-nav-item.facebook > .icon { background-position: 0 -1.6rem; }
.fixed-nav-item.line { background-color: #07c503; background-image: linear-gradient(45deg, #07c503, #0ae004); }
.fixed-nav-item.line > .icon { background-position: -.54rem -1.6rem; }

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-0.05rem); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(.05rem); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes bounceIn {
    0% { transform: scale3d(0,0,0); opacity: 0; }
    25% { transform: scale3d(1.25,1.25,1.25); opacity: 1; }
    50% { transform: scale3d(1,1,1); opacity: 1; }
    75% { transform: scale3d(.95,.95,.95); opacity: 1; }
    100% { transform: scale3d(1,1,1); opacity: 1; }
}

@media only screen and (max-width: 1680px) {
    html { font-size: 90px; }
}

@media only screen and (max-width: 1440px) {
    html { font-size: 80px; }
}

@media only screen and (max-width: 1200px) {
    html { font-size: 70px; }
}

/* 手機端適配 */
@media only screen and (max-width: 768px) {
    html { font-size: 50px; background-color: #282460; }
    body { background-color: #282460; }
    header { position: -webkit-sticky; position: sticky; top: 0; left: 0; right: 0; z-index: 999; }
    .header { height: .98rem; }
    .logo { width: 2.82rem; height: .52rem; left: 0; right: 0; margin: auto; }
    .logo::after { width: .75rem; height: .2rem; background-size: auto .52rem; background-position: -2.88rem 0; }
    .nav { display: none; }
    .user { display: none; }

    .mobile-nav-control,
    .mobile-user-control { display: block; }

    /* 底部版權導航等 */
    footer { position: relative; padding-top: .5rem; padding-bottom: .15rem; background-color: #282460; text-align: center; }
    .footer-con { flex-direction: column; align-items: center; justify-content: initial; height: auto; }
    .footer-logo { width: 100%; height: .6rem; margin-bottom: 1.5rem; }
    .footer-nav { display: block; height: auto; margin-right: unset; font-size: .26rem; line-height: .6rem; text-align: center; }
    .footer-nav > li { padding-left: 0; padding-right: 0; }
    .footer-nav > li::after { display: none; }
    .copyright { margin-top: .25rem; border-top: none; }
    .copyright-con { flex-direction: column; height: auto; font-size: .22rem; line-height: .3rem; }
    .copyright-content { flex-direction: column; justify-content: center; align-items: center; }
    .copyright-content > .zh { padding-left: .46rem; background-size: auto .26rem; }
    .copyright-content > .en { margin-left: 0; margin-top: .1rem; }

    .contact { position: absolute; top: 1.5rem; left: 0; right: 0; justify-content: center; }
    .contact > li { width: .68rem; height: .68rem; margin-left: .3rem; }
    .contact > li:first-of-type { margin-left: 0; }
    .contact > li > a { background-size: auto .4rem; }
    .contact > li > a.line { background-color: #01b901; }
    .contact > li > a.facebook { background-color: #4b61f4; }
    .contact > li > a::after { display: none; }
    .contact > li > a:hover,
    .contact > li > a:active { box-shadow: none; }

    .fixed-menu { display: none; }
}

@supports(padding: max(0px)) {
    body { padding-top: env(safe-area-inset-top); }
    .copyright-con { padding-bottom: max(.15rem, env(safe-area-inset-bottom)); }
}
